<template>
    <div>
      <div style="display: flex; align-items: center;">
        <img src="../../../static/线条 1@1x.png" alt="">
        <span style="margin-left: 10px; font-size: 30px; color: #415058; font-weight: bold;">出勤情况</span>
      </div>
  
      <div style="display: flex; align-items: center; margin-top: 20px;">
        <img src="../../../static/sphereblue.png" style="width: 200px; margin-left: 20px; margin-top: 30px;position: relative;">
        <img src="../../../static/spherepink.png" style="width: 200px; margin-left: 100px; margin-top: 30px;position: relative;">
  
        <div style="display: flex; flex-direction: column; align-items: center; position: absolute; top: 200px; left: 100px; transform: translate(-50%, -50%); margin-left: 20px;">
          <div style="font-size:30px; color: #415058; font-weight: bold;">缺勤次数</div>
          <div style="font-size: 40px; color: #274AAA; margin-top: 5px;">1/12</div>
        </div>
  
        <div style="display: flex; flex-direction: column; align-items: center; position: absolute; top: 200px; left: 300px; transform: translate(-50%, -50%); margin-left: 120px;">
          <div style="font-size:30px; color: #415058; font-weight: bold;">迟到次数</div>
          <div style="font-size: 40px; color: #C044A5; margin-top: 5px;">3/12</div>
        </div>
      </div>
    </div>
  </template>
  
